<template>
    <v-layout v-if="isLoading">
        <div style="display: flex;justify-content: center;align-items: center;height: 100vh;width: 100%;">
            <v-progress-circular indeterminate size="50" color="blue" width="1"></v-progress-circular>
        </div>
    </v-layout>
    <v-layout v-else>
        <div style="width: 100%;background-color: rgb(239, 239, 239);padding: 10px;display: flex;">
            <div style="background-color: white;height: 80vh;padding:5px;width: 60%;">
                <div>
                    <CourseTable height="70vh" width="" :show-teacher="false" />
                </div>
            </div>
            <div style="margin-left: 3%;width: 35%;">
                <v-card elevation="0">
                    <v-container style="padding-top: 5%;">
                        <v-row justify="space-between" align="center">
                            <span style="font-weight: bold;font-size: large;margin-left: 5%;">教学周历</span>
                            <span style="font-size: small;color: gray;margin-right: 2%;">教学第{{ week }}周</span>
                        </v-row>
                        <v-divider style="margin-top: 5%;"></v-divider>
                        <v-row dense>
                            <v-col cols="3">
                            </v-col>
                            <v-col v-for="d in day" :key="d" align="center">
                                <span>{{ d }}</span>
                            </v-col>
                        </v-row>
                        <v-divider></v-divider>
                        <v-row v-for="(row, rowIndex) in calendar" :key="rowIndex" dense>
                            <v-col cols="3" align="center">
                                <span class="title">第{{ week + rowIndex }}周</span>
                            </v-col>
                            <v-divider vertical></v-divider>
                            <v-col v-for="(col, colIndex) in row" :key="colIndex" align="center" style="height: 6px;">
                                <span class="item"
                                    v-if="(today.getMonth() === 11 && col.getMonth() === 0) || today.getMonth() <= col.getMonth()"
                                    :style="(col.getDate() === today.getDate() && col.getMonth() === today.getMonth()) ?
                                        { 'color': 'blue', 'font-size': 'large' } : {}">
                                    {{ col.getDate() < 10 ? '0' : '' }}{{ col.getDate() }} </span>
                                        <span v-else></span>
                            </v-col>
                        </v-row>
                    </v-container>
                </v-card>
                <v-card elevation="0" style="margin-top: 5%;" height="42.9vh">
                    <v-container style="padding-top: 5%;">
                        <v-row align="center">
                            <span style="font-weight: bold;font-size: large;margin-left: 5%;">课程备注</span>
                        </v-row>
                        <v-divider style="margin-top: 5%;"></v-divider>
                        <v-table height="35vh">
                            <tbody>
                                <tr v-for="course in courses" :key="course.name">
                                    <td v-if="course.comment !== ''" style="font-size: small;">{{ course.name }}</td>
                                    <td v-if="course.comment !== ''">{{ course.comment }}</td>
                                </tr>
                            </tbody>
                        </v-table>
                    </v-container>
                </v-card>
            </div>
        </div>
    </v-layout>
</template>
<script lang="ts" setup>
import CourseTable from '@/components/CourseTable.vue';
import type { Course } from '@/models/course';
import { useCourseStore } from '@/stores';
import { getWeekNumber, getCalendar } from '@/utils/dateUtil'
import { onMounted, ref } from 'vue';
const day = ['一', '二', '三', '四', '五', '六', '日']
let week = getWeekNumber()
let calendar = getCalendar()
let today = new Date()
let courses = ref([] as Course[])
let isLoading = ref(false)
onMounted(async () => {
    isLoading.value = true
    await useCourseStore().init()
    courses.value = useCourseStore().courses.filter((obj, index, array) => {
        return array.findIndex(item => item.id === obj.id) === index;
    })
    isLoading.value = false
})
</script>
<style scoped>
.title {
    color: gray;
    font-size: small;
}

.item {
    font-size: 10px;
}
</style>